<template>
    <div class="summessage">
        <div class="summessage_top">
            <div style="background-color: #8693F3; ">
                <p>通知发布数量</p><br>
                <p style="font-size: 12px;">{{ haha.toLocaleDateString() }}</p>
                <p><span style="font-size: 22px; font-weight: 700; margin-right: 10px;">{{ num1 }}</span>条</p>
            </div>
            <div style="background-color: #bc8dee; ">
                <p>相册发布数量</p><br>
                <p style="font-size: 12px;">{{ haha.toLocaleDateString() }}</p>
                <p><span style="font-size: 22px; font-weight: 700; margin-right:10px;">{{ num2 }}</span>条</p>
            </div>
            <div style="background-color: #ffa897; ">
                <p>评价发布数量</p><br>
                <p style="font-size: 12px;">{{ haha.toLocaleDateString() }}</p>
                <p><span style="font-size: 22px; font-weight: 700; margin-right:10px;">{{ num3 }}</span>条</p>
            </div>
            <div style="background-color: #89c3f8; ">
                <p>投票发布数量</p><br>
                <p style="font-size: 12px;">{{ haha.toLocaleDateString() }}</p>
                <p><span style="font-size: 22px; font-weight: 700; margin-right:10px;">{{ num4 }}</span>条</p>
            </div>
        </div>
        <!-- echarts -->
        <div class="summessage_contain" style="background-color: white; width: 100%; margin-top: 30px;">
            <div style="padding: 10px 10px;">
                <h3>消息发布数量统计</h3>
                <div style="color:#9B9B9B ; display: flex; justify-content: space-between; padding: 5px; 0"><span>2022年08月 |
                        前10</span><span class="tolinkcolor" @click="routerlink">查看更多 ></span></div>
            </div>
            <Echars_sum></Echars_sum>
        </div>
        <div class="summessage_bottom" style="padding: 30px 0; display: flex; justify-content: space-between;">
            <div style="width: 45%; background-color: white; padding: 10px;">
                <h3>学校月消息发布排行</h3>
                <div style="color:#9B9B9B ; display: flex; justify-content: space-between; padding: 5px; 0"><span>2022年08月 |
                        前10</span><span class="tolinkcolor" @click="schoolbtn">查看更多 ></span></div>
                <el-table :data="num5" style="width: 100%">
                    <el-table-column label="排名" width="180">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="姓名" width="180">
                        <!-- <template #default="scope">
                            {{ scope.row}}
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="notice" label="累计发布消息数量" />
                </el-table>
            </div>
            <div style="width: 45%; background-color: white; padding: 10px;">
                <h3>教师月消息发布排行</h3>
                <div style="color:#9B9B9B; display: flex; justify-content: space-between; padding: 5px 0;"><span>2022年八月 |
                        前10</span><span class="tolinkcolor" @click="classbtn">查看更多 ></span></div>
                <el-table :data="num6" style="width: 100%">
                    <!-- :row-class-name="tableRowClassName" -->
                    <el-table-column label="排名" width="180">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="teacher" label="姓名" width="180">
                        <!-- <template #default="scope">
                                {{ scope.row.teacher}}
                            </template> -->
                    </el-table-column>
                    <el-table-column prop="allnum" label="累计发布消息数量">
                        <!-- <template #default="scope">
                                {{ scope.row.messageNumber}}
                            </template> -->
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import router from '@/router';
import service from "@/api"
import Echars_sum from '@/components/Echars_sum.vue'
import { map } from 'lodash';
let haha = ref(new Date())

var num1 = ref()
var num2 = ref()
var num3 = ref()
var num4 = ref()
var num5 = ref([])
var num6 = ref([])
onMounted(async () => {
    // 根据月份获取 通知数量
    let res1 = await service.xss.messageStatistics_noticeNum({})
    // console.log(res1.data);
    num1.value = res1.data.data
    // 根据月份获取 相册数量
    let res2 = await service.xss.messageStatistics_photosNum({})
    // console.log(res2);
    num2.value = res2.data.data
    // 根据月份获取 评价数量
    let res3 = await service.xss.messageStatistics_evaluateNum({})
    // console.log(res3);
    num3.value = res3.data.data
    // // 根据月份获取 投票数量
    let res4 = await service.xss.messageStatistics_vote({})
    // console.log(res4.data);
    num4.value = res4.data.data
    // 学校月消息发布排行
    let res5 = await service.xss.messageStatistics_schoolMsgNum()
    // console.log(res5.data.data)

    let num5sort = res5.data.data.sort((a: any, b: any) => { return b.notice - a.notice });
    // console.log(num5sort);
    num5.value = num5sort

    // 老师月消息发布排行
    let res6 = await service.xss.messageStatistics_teacherMsgNum()
    // let fil = newtable.value.map((item,index) =>newtable.value[index].log = (item.num / baifenbi*100).toFixed(2) + '%')
    // 这点排序一下发布的数量，添加进每个老师中
    let num6countitem = JSON.parse(JSON.stringify(res6.data.data))
    // console.log(num6countitem);
    // 遍历给每个对象增加键值对, 处理好的数据 赋值给响应式num6
    num6countitem.forEach((item: any, index: any) => {
        // 得到每个教师累加的发送消息 总 数量，然后新值挂载到每个教师上 ->
        // 对象增加键值对 numcount = ?
        return item.allnum = item.messageNumber.reduce((prev: any, item: any) => prev += item.num, 0)
    })
    // console.log(num6countitem);
    num6.value = num6countitem.sort((a: any, b: any) => b.messageNumber - a.messageNumber)
    // console.log(num6.value);

})
// 查看更多 消息发布列表数据
const routerlink = () => {
    // console.log('123')
    router.push('/home/messagestatistics/sendmessage');
}
// 查看更多 学校发布列表数据
const schoolbtn = () => {
    router.push('/home/messagestatistics/schoolsort');
}
// 查看更多 教师发布列表数据
const classbtn = () => {
    router.push('/home/messagestatistics/teachersort');
}

interface User {
    date: string
    name: string
    address: string
}
const tableData: User[] = [
    {
        date: '2016-05-03',
        name: "哈哈",
        address: '189',
    },
    {
        date: '2016-05-02',
        name: "哈哈",
        address: 'N89'
    },
    {
        date: '2016-05-04',
        name: "哈哈",
        address: 'N89'
    },
    {
        date: '2016-05-01',
        name: "哈哈",
        address: 'No9'
    },
]

</script>

<style scoped>
.summessage {
    margin: 10px;
}

.summessage_top {
    display: flex;
    justify-content: space-around;
}

.summessage_top div {
    width: 20%;
    height: 100px;
    color: white;
    background-color: pink;
    border-radius: 5px;
    padding: 10px 20px;
}

.tolinkcolor:hover {
    color: #3893f7;
    cursor: pointer
}
</style>


